import { useColor } from "@artsy/palette-mobile"
import { PixelRatio } from "react-native"
import Svg, { Path } from "react-native-svg"
import { BottomTabType } from "./BottomTabType"

export const ICON_WIDTH = 53
export const ICON_HEIGHT = 49

export const BottomTabsIcon: React.FC<{ tab: BottomTabType; state: "active" | "inactive" }> = ({
  tab,
  state,
}) => {
  const color = useColor()

  const ICONS: Record<BottomTabType, { active: React.JSX.Element; inactive: React.JSX.Element }> = {
    home: {
      active: (
        <>
          <Path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M27.0268 17.7002C27.4488 17.3968 28.0171 17.3968 28.4391 17.7002L38.5094 24.9272C38.9294 25.1439 39.2329 25.5519 39.2329 26.0492V39.1416C39.2329 39.8109 38.6909 40.3535 38.0224 40.3535H30.2909C30.0147 40.3535 29.7909 40.1296 29.7909 39.8535L29.7908 32.7382C29.7908 32.4621 29.5669 32.2382 29.2908 32.2382H26.175C25.8989 32.2382 25.675 32.4621 25.675 32.7382L25.6751 39.8535C25.6751 40.1296 25.4512 40.3535 25.1751 40.3535H17.4434C16.7749 40.3535 16.2329 39.8109 16.2329 39.1416V26.0492C16.2329 25.5518 16.5355 25.1734 16.9233 24.8988L27.0268 17.7002ZM17.8066 26.2688V38.7781L24.1013 38.7781V31.8747C24.1013 31.2054 24.6433 30.6628 25.3119 30.6628H30.154C30.8225 30.6628 31.3645 31.2054 31.3645 31.8747V38.7781L37.6592 38.7781V26.2688L27.7329 19.1321L17.8066 26.2688Z"
            fill={color("mono100")}
          />
          <Path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M27.0268 17.7002C27.4488 17.3968 28.0171 17.3968 28.4391 17.7002L38.5094 24.9272C38.9294 25.1439 39.2329 25.5519 39.2329 26.0492V39.1416C39.2329 39.8109 38.6909 40.3535 38.0224 40.3535H30.2909C30.0147 40.3535 29.7909 40.1296 29.7909 39.8535L29.7908 32.7382C29.7908 32.4621 29.5669 32.2382 29.2908 32.2382H26.175C25.8989 32.2382 25.675 32.4621 25.675 32.7382L25.6751 39.8535C25.6751 40.1296 25.4512 40.3535 25.1751 40.3535H17.4434C16.7749 40.3535 16.2329 39.8109 16.2329 39.1416V26.0492C16.2329 25.5518 16.5355 25.1734 16.9233 24.8988L27.0268 17.7002Z"
            fill={color("mono100")}
          />
        </>
      ),
      inactive: (
        <Path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M27.0268 18.1401C27.4488 17.8367 28.0171 17.8368 28.4391 18.1401L38.5094 25.3672C38.9294 25.5839 39.2329 25.9918 39.2329 26.4891V39.5816C39.2329 40.2509 38.6909 40.7934 38.0224 40.7934H30.2909C30.0147 40.7934 29.7909 40.5696 29.7909 40.2934L29.7908 33.1782C29.7908 32.902 29.5669 32.6782 29.2908 32.6782H26.175C25.8989 32.6782 25.675 32.902 25.675 33.1782L25.6751 40.2934C25.6751 40.5696 25.4512 40.7934 25.1751 40.7934H17.4434C16.7749 40.7934 16.2329 40.2509 16.2329 39.5816V26.4891C16.2329 25.9918 16.5355 25.6133 16.9233 25.3388L27.0268 18.1401ZM17.8066 26.7088V39.218L24.1013 39.218V32.3146C24.1013 31.6453 24.6433 31.1028 25.3119 31.1028H30.154C30.8225 31.1028 31.3645 31.6453 31.3645 32.3146V39.218L37.6592 39.218V26.7087L27.7329 19.5721L17.8066 26.7088Z"
        />
      ),
    },
    search: {
      active: (
        <Path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M15.9111 26.4607C15.9111 20.9172 20.4551 16.4434 26.0354 16.4434C31.6158 16.4434 36.1597 20.9172 36.1597 26.4607C36.1597 28.773 35.367 30.9025 34.0389 32.5963L38.4939 36.9991C39.2444 37.7408 39.2444 38.9483 38.4939 39.69C37.7499 40.4252 36.5486 40.4252 35.8046 39.69L31.1612 35.101C29.6568 35.9764 27.9039 36.4781 26.0354 36.4781C20.4551 36.4781 15.9111 32.0042 15.9111 26.4607ZM26.0354 20.2371C22.5397 20.2371 19.7261 23.0346 19.7261 26.4607C19.7261 29.8868 22.5397 32.6843 26.0354 32.6843C29.5311 32.6843 32.3447 29.8869 32.3447 26.4607C32.3447 23.0346 29.5311 20.2371 26.0354 20.2371Z"
          fill={color("mono100")}
        />
      ),
      inactive: (
        <Path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M31.2967 34.2689C29.8099 35.3077 27.9948 35.918 26.0354 35.918C20.9962 35.918 16.9111 31.8808 16.9111 26.9007C16.9111 21.9205 20.9962 17.8833 26.0354 17.8833C31.0746 17.8833 35.1597 21.9205 35.1597 26.9007C35.1597 29.2971 34.2138 31.4752 32.6708 33.0902L37.7909 38.1503C38.1453 38.5006 38.1453 39.0684 37.7909 39.4187C37.4365 39.7689 36.8619 39.7689 36.5075 39.4187L31.2967 34.2689ZM33.3447 26.9007C33.3447 30.8902 30.0722 34.1243 26.0354 34.1243C21.9986 34.1243 18.7261 30.8902 18.7261 26.9007C18.7261 22.9112 21.9986 19.677 26.0354 19.677C30.0722 19.677 33.3447 22.9112 33.3447 26.9007Z"
        />
      ),
    },
    inbox: {
      active: (
        <Path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M32.8464 35.2559C33.1054 34.8845 33.5245 34.6638 33.9712 34.6638H38.4678C39.6114 34.6638 40.5384 33.7175 40.5384 32.5502V19.5597C40.5384 18.3923 39.6114 17.446 38.4678 17.446H17.9979C16.8543 17.446 15.9272 18.3923 15.9272 19.5597V32.5502C15.9272 33.7175 16.8543 34.6638 17.9979 34.6638H22.4937C22.9404 34.6638 23.3595 34.8845 23.6184 35.2559L26.8265 39.8577C27.5145 40.8445 28.9504 40.8445 29.6384 39.8577L32.8464 35.2559Z"
          fill={color("mono100")}
        />
      ),
      inactive: (
        <Path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M32.3464 35.587C32.6054 35.2155 33.0245 34.9949 33.4712 34.9949H37.9678C39.1114 34.9949 40.0384 34.0486 40.0384 32.8813V19.8907C40.0384 18.7234 39.1114 17.7771 37.9678 17.7771H17.4979C16.3543 17.7771 15.4272 18.7234 15.4272 19.8907V32.8813C15.4272 34.0486 16.3543 34.9949 17.4979 34.9949H21.9937C22.4404 34.9949 22.8595 35.2155 23.1184 35.587L26.3265 40.1887C27.0145 41.1756 28.4504 41.1756 29.1384 40.1887L32.3464 35.587ZM37.9678 19.5384H17.4979C17.3073 19.5384 17.1528 19.6962 17.1528 19.8907V32.8813C17.1528 33.0758 17.3073 33.2335 17.4979 33.2335H22.8839C23.3301 33.2335 23.7488 33.4538 24.0079 33.8247L24.8252 34.9949H24.8231L27.7324 39.1675L30.6423 34.9951L31.4535 33.8276C31.7124 33.4551 32.132 33.2337 32.5795 33.2337L37.9678 33.2335C38.1584 33.2335 38.3129 33.0758 38.3129 32.8813V19.8907C38.3129 19.6962 38.1584 19.5384 37.9678 19.5384Z"
        />
      ),
    },
    favorites: {
      active: (
        <Path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M32.3374 16.3373C31.4033 16.3365 30.4782 16.5199 29.6149 16.8768C28.7517 17.2337 27.9672 17.7571 27.3063 18.4173L27.0041 18.7195L26.7018 18.4173C25.3675 17.0829 23.5578 16.3333 21.6707 16.3333C19.7837 16.3333 17.974 17.0829 16.6396 18.4173C15.3053 19.7516 14.5557 21.5614 14.5557 23.4484C14.5557 25.3354 15.3053 27.1452 16.6396 28.4795L26.3818 38.204C26.4616 38.289 26.558 38.3568 26.6651 38.4031C26.7721 38.4494 26.8874 38.4733 27.0041 38.4733C27.1207 38.4733 27.2361 38.4494 27.3431 38.4031C27.4501 38.3568 27.5465 38.289 27.6263 38.204L37.3685 28.4795C38.3641 27.485 39.0423 26.2174 39.3172 24.8372C39.592 23.4571 39.4512 22.0264 38.9125 20.7263C38.3738 19.4263 37.4615 18.3152 36.291 17.5339C35.1206 16.7526 33.7447 16.3362 32.3374 16.3373Z"
          fill={color("mono100")}
        />
      ),
      inactive: (
        <Path
          fillRule="evenodd"
          clipRule="evenodd"
          d="M32.333 16.3334C31.3989 16.3326 30.4738 16.5159 29.6105 16.8728C28.7473 17.2297 27.9628 17.7532 27.3019 18.4134L26.9997 18.7156L26.6974 18.4134C25.3631 17.079 23.5534 16.3294 21.6663 16.3294C19.7793 16.3294 17.9696 17.079 16.6352 18.4134C15.3009 19.7477 14.5513 21.5574 14.5513 23.4445C14.5513 25.3315 15.3009 27.1413 16.6352 28.4756L26.3774 38.2C26.4572 38.2851 26.5536 38.3528 26.6607 38.3992C26.7677 38.4455 26.8831 38.4694 26.9997 38.4694C27.1163 38.4694 27.2317 38.4455 27.3387 38.3992C27.4457 38.3528 27.5421 38.2851 27.6219 38.2L37.3641 28.4756C38.3597 27.4811 39.0379 26.2135 39.3128 24.8333C39.5876 23.4532 39.4468 22.0225 38.9081 20.7224C38.3694 19.4223 37.4571 18.3113 36.2866 17.53C35.1162 16.7487 33.7403 16.3323 32.333 16.3334ZM36.1019 27.2134L26.9997 36.3156L17.8974 27.2134C17.3735 26.7251 16.9532 26.1363 16.6617 25.4821C16.3702 24.8279 16.2134 24.1216 16.2008 23.4055C16.1882 22.6894 16.3199 21.9781 16.5881 21.314C16.8564 20.6499 17.2556 20.0466 17.7621 19.5402C18.2685 19.0338 18.8718 18.6345 19.5359 18.3663C20.2 18.098 20.9113 17.9663 21.6274 17.9789C22.3435 17.9916 23.0497 18.1483 23.7039 18.4398C24.3582 18.7313 24.947 19.1516 25.4352 19.6756L26.3774 20.6L26.9997 21.24L27.6219 20.6L28.5641 19.6756C29.5751 18.7335 30.9124 18.2206 32.2941 18.245C33.6757 18.2694 34.994 18.8291 35.9712 19.8063C36.9484 20.7834 37.5081 22.1017 37.5325 23.4834C37.5568 24.8651 37.044 26.2023 36.1019 27.2134Z"
        />
      ),
    },
    profile: {
      active: (
        <>
          <Path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M28.2329 17.3746C25.8913 17.3746 23.7806 18.7861 22.886 20.9501C21.9915 23.1141 22.4895 25.6039 24.1476 27.2573C25.8058 28.9107 28.297 29.4016 30.4584 28.5009C32.6199 27.6002 34.0253 25.4855 34.0186 23.1439C34.0095 19.9549 31.4218 17.3746 28.2329 17.3746Z"
            fill={color("mono100")}
          />
          <Path
            d="M34.0021 30.9467C36.278 30.9467 38.123 32.7917 38.123 35.0676V40.0126H18.3428V35.0676C18.3428 32.7917 20.1878 30.9467 22.4637 30.9467H34.0021Z"
            fill={color("mono100")}
          />
        </>
      ),
      inactive: (
        <>
          <Path
            fillRule="evenodd"
            clipRule="evenodd"
            d="M27.7329 17.8146C25.3913 17.8146 23.2806 19.226 22.386 21.39C21.4915 23.554 21.9895 26.0438 23.6476 27.6972C25.3058 29.3506 27.797 29.8416 29.9584 28.9408C32.1199 28.0401 33.5253 25.9254 33.5186 23.5838C33.5095 20.3949 30.9218 17.8146 27.7329 17.8146ZM27.7329 19.4629C29.4078 19.4629 30.9174 20.4728 31.5568 22.0208C32.1963 23.5689 31.8392 25.3497 30.6526 26.5317C29.4659 27.7136 27.6836 28.0635 26.1381 27.418C24.5926 26.7724 23.5888 25.2587 23.5955 23.5838C23.6046 21.3052 25.4543 19.4629 27.7329 19.4629Z"
          />
          <Path d="M33.5021 31.3866C35.778 31.3866 37.623 33.2316 37.623 35.5075V40.4526H35.9746V35.5075C35.9746 34.142 34.8677 33.035 33.5021 33.035H21.9637C20.5981 33.035 19.4911 34.142 19.4911 35.5075V40.4526H17.8428V35.5075C17.8428 33.2316 19.6878 31.3866 21.9637 31.3866H33.5021Z" />
        </>
      ),
    },
  }

  return (
    <Svg
      width={ICON_WIDTH * PixelRatio.getFontScale()}
      height={ICON_HEIGHT * PixelRatio.getFontScale()}
      viewBox={`1 0 ${ICON_WIDTH} ${ICON_HEIGHT}`}
      fill={color("mono100")}
    >
      {ICONS[tab][state]}
    </Svg>
  )
}
